<template>
  <view class="section">
    <view class="section-header">
      <text class="section-title">附近的闲置</text>
      <text class="section-more">切换位置</text>
    </view>
    <view class="nearby-list">
      <view class="nearby-card" v-for="(item, idx) in nearby" :key="idx">
        <image :src="item.avatar" class="nearby-avatar" mode="aspectFill" />
        <view class="nearby-info">
          <view class="nearby-header">
            <text class="nearby-name">{{ item.name }}</text>
            <text class="nearby-distance">{{ item.distance }}</text>
          </view>
          <text class="nearby-desc">{{ item.desc }}</text>
          <view class="nearby-imgs">
            <image v-for="(img, i) in item.imgs" :key="i" :src="img" class="nearby-img" mode="aspectFill" />
          </view>
          <view class="nearby-footer">
            <text class="nearby-price">¥{{ item.price }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    nearby: {
      type: Array,
      default: () => []
    }
  }
}
</script>

<style scoped>
.section { background: #fff; margin-top: 12px; padding: 12px; border-radius: 8px; }
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.section-title { font-weight: bold; font-size: 16px; }
.section-more { color: #888; font-size: 12px; }
.nearby-list { margin-top: 8px; }
.nearby-card { display: flex; margin-bottom: 12px; }
.nearby-avatar { width: 44px; height: 44px; border-radius: 50%; margin-right: 8px; }
.nearby-info { flex: 1; }
.nearby-header { display: flex; justify-content: space-between; font-size: 13px; }
.nearby-name { font-weight: bold; }
.nearby-distance { color: #888; font-size: 12px; }
.nearby-desc { color: #666; font-size: 12px; margin: 4px 0; }
.nearby-imgs { display: flex; gap: 4px; margin: 4px 0; }
.nearby-img { width: 40px; height: 40px; border-radius: 4px; }
.nearby-footer { display: flex; justify-content: flex-end; }
.nearby-price { color: #FF5E5E; font-weight: bold; }
</style>
